<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-语法速通'"></Breadcrumb>
        <RouterTabs :list="routerList" :current="1"> </RouterTabs>
        <view class="content">
          <view class="box">
            <view class="top">
              <view class="top_content">
                <view class="title"> 请选择版本和知识点 </view>
                <view class="edition">
                  <view
                    class="edition_content"
                    :class="{ active: period === '1' }"
                    @click="handleChangePeriod('1')"
                  >
                    <text>小学<br />语法</text>
                  </view>
                  <view
                    class="edition_content"
                    :class="{ active: period === '2' }"
                    @click="handleChangePeriod('2')"
                  >
                    <text>初中<br />语法</text>
                  </view>
                  <view
                    class="edition_content"
                    :class="{ active: period === '3' }"
                    @click="handleChangePeriod('3')"
                  >
                    <text>高中<br />语法</text>
                  </view>
                  <view
                    class="edition_content"
                    :class="{ active: period === '4' }"
                    @click="handleChangePeriod('4')"
                  >
                    <text>中考<br />押题</text>
                  </view>
                </view>
              </view>
              <view class="top_content">
                <view class="title"> 题目数量 </view>
                <view class="number">
                  <view class="number_content">
                    <input
                      v-model="num"
                      type="number"
                      placeholder="请输入小于50的数字"
                    />
                  </view>
                </view>
              </view>
            </view>
            <view class="bottom">
              <u-checkbox-group
                size="44"
                width="25%"
                @change="checkboxGroupChange"
              >
                <u-checkbox
                  v-model="item.checked"
                  v-for="(item, index) in grammarList"
                  :key="index"
                  :name="item.id"
                  label-size="30"
                  :size="30"
                  >{{ item.itemName }}</u-checkbox
                >
              </u-checkbox-group>
            </view>
            <view class="button">
              <view class="button_content" @click="creatPaper()">
                <text>创建试卷</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import GrammarPaperDetail from "./grammarPaperDetail";
import { grammarItem, createTestQuestions } from "@/api/grammar";
export default {
  components: { GrammarPaperDetail },
  data() {
    return {
      routerList: [
        {
          name: "语法框图",
          url: "pages/grammar/grammarDiagram",
        },
        {
          name: "自主组卷",
          url: "pages/grammar/grammarPaper",
        },
        {
          name: "错题本",
          url: "pages/grammar/grammarBook",
        },
      ],
      period: "1",
      grammarList: [],
      checkList: [],
      num: "",
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      // default
      this.handleChangePeriod();
    },
    handleChangePeriod(id) {
      if (id === this.period) return;
      if (id) this.period = id;
      let params = {
        period: this.period,
      };
      grammarItem(params).then((res) => {
        this.grammarList = res.data;
      });
    },
    creatPaper() {
      if (this.checkList.length === 0) {
        uni.showModal({
          title: "温馨提示",
          content: "请选择知识点!",
          showCancel: false,
        });
        return;
      }
      if (this.num <= 0 || this.num > 50) {
        uni.showModal({
          title: "温馨提示",
          content: "请输入正确的数字!",
          showCancel: false,
        });
        return;
      }
      let params = {
        itemIds: this.checkList,
        questionNum: this.num,
      };
      createTestQuestions(params).then((res) => {
        uni.navigateTo({
          url: `/pages/grammar/grammarPaperDetail?id=${res.data}&period=${this.period}`,
        });
      });
    },
    checkboxGroupChange(e) {
      this.checkList = e;
    },
  },
};
</script>
<style scoped lang="scss">
@import "./grammarPaper";
</style>
